<script setup lang="ts">
// import HelloWorld from './components/HelloWorld.vue'
import { ref } from 'vue';
const value = ref<number>(2);

const color=ref('#AABBCC')

const value1 = ref(30);
const onAfterChange = value => {
  console.log('afterChange: ', value);
};

const onChange = (current: number) => {
  console.log(current);
};

</script>



<template>

  <div>
    <a-rate v-model:value="value" />
  </div>

    <div class="code-box-demo container">
      <a-slider v-model:value="value1" @afterChange="onAfterChange" />
    </div>
  <div class="container">
    <a-carousel :after-change="onChange">
      <div><h3>1</h3></div>
      <div><h3>2</h3></div>
      <div><h3>3</h3></div>
      <div><h3>4</h3></div>
    </a-carousel>
  </div>
  <div class="color-picker">
    <a-color-picker  v-model="color"/>
  </div>
    <!--  <HelloWorld msg="Vite + Vue" />-->

<!--  <a-space wrap>-->
<!--    <a-button type="primary">Primary Button</a-button>-->
<!--    <a-button>Default Button</a-button>-->
<!--    <a-button type="dashed">Dashed Button</a-button>-->
<!--    <a-button type="text">Text Button</a-button>-->
<!--    <a-button type="link">Link Button</a-button>-->
<!--  </a-space>-->
</template>

<style scoped>

.code-box-demo .ant-slider {
  margin-bottom: 16px;
}

/* For demo */
.container{
  width: 50%;
}
.color-picker{
  width: 150px;
}
:deep(.slick-slide) {
  text-align: center;
  height: 160px;
  line-height: 160px;
  background: #364d79;
  overflow: hidden;
}

:deep(.slick-slide h3) {
  color: #fff;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
